
<template>
  <el-dialog
    v-model="conf.visible"
    title="添加 功能菜单"
    width="30%"
    draggable
    :before-close="hide"
  >
  <el-form :model="form" size="small" ref="form" :rules="rules">

   <!--系统 下拉控件 -->
  <el-form-item prop="sys_id" label="系统" label-width="100px" label-position="right">
    <el-select v-model="form.sys_id" style="width: 100%" filterable  clearable placeholder="请选择系统">
      <el-option v-for="item in sys_idList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </el-form-item>

  

   <!--类型 下拉控件 -->
  <el-form-item prop="menu_type" label="类型" label-width="100px" label-position="right">
    <el-select v-model="form.menu_type" style="width: 100%" filterable  clearable placeholder="请选择类型">
      <el-option v-for="item in menu_typeList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </el-form-item>

  

 <!--名称 输入控件 -->
 <el-form-item prop="name" label="名称" label-width="100px" label-position="right">
   <el-input clearable style="width: 100%" v-model="form.name" maxlength="64"  placeholder="请输入名称" />
 </el-form-item>

 <!--地址 输入控件 -->
 <el-form-item prop="path" label="地址" label-width="100px" label-position="right">
   <el-input clearable style="width: 100%" v-model="form.path" maxlength="256"  type="textarea" show-word-limit  placeholder="请输入地址" />
 </el-form-item>

 <!--图标 输入控件 -->
 <el-form-item prop="icon" label="图标" label-width="100px" label-position="right">
   <el-input clearable style="width: 100%" v-model="form.icon" maxlength="64"  placeholder="请输入图标" />
 </el-form-item>

  <!--排序 数字控件 -->
  <el-form-item prop="sortrank" label="排序" label-width="100px" label-position="right">
    <el-input-number style="width: 100%" v-model="form.sortrank"/>
  </el-form-item>

  

  <!--展开 switch控件 -->
  <el-form-item prop="is_open" label="展开" label-width="100px" label-position="right">
    <el-switch v-model="form.is_open_switch" />
  </el-form-item>

  

  <!--状态 switch控件 -->
  <el-form-item prop="enable" label="状态" label-width="100px" label-position="right">
    <el-switch v-model="form.enable_switch" />
  </el-form-item>

  

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      conf: {
        visible: false,
        uploadPath:this.$theia.env.join("/file/upload"),
      },
    rules:{
      sys_id:[{
          required:true,
          message:"请输入系统",
          trigger: 'blur',
      }],
      menu_type:[{
          required:false,
          message:"请输入类型",
          trigger: 'blur',
      }],
      name:[{
          required:true,
          message:"请输入名称",
          trigger: 'blur',
      }],
      path:[{
          required:true,
          message:"请输入地址",
          trigger: 'blur',
      }],
      icon:[{
          required:false,
          message:"请输入图标",
          trigger: 'blur',
      }],
      sortrank:[{
          required:true,
          message:"请输入排序",
          trigger: 'blur',
      }],
      is_open:[{
          required:false,
          message:"请输入展开",
          trigger: 'blur',
      }],
      enable:[{
          required:true,
          message:"请输入状态",
          trigger: 'blur',
      }],
    },
    form:{
        sys_id:"",
        menu_type:"",
        name:"",
        path:"",
        icon:"",
        sortrank:"",
        is_open_switch:false,
        enable_switch:false,
        },
        sys_idList:this.$theia.enum.get("system_info"),
        menu_typeList:this.$theia.enum.get("menu_type"),
      }},
  methods: {
    show() {
      this.conf.visible = true;
    },
    save(){
       this.form.is_open = this.form.is_open_switch?0:1;this.form.enable = this.form.enable_switch?0:1;
        this.$refs.form.validate((v=>{
            if(v){
                this.onSave()
               
            }
        }))
    },
    onSave(){
        let that = this
        let postForm=this.form
        
        this.$theia.http.post("/systemmenu",postForm).then(res=>{
            that.$notify.success({title: '成功',message: '功能菜单保存成功',duration:5000})
            that.$emit("onsaved")
            that.hide()
        }).catch(res=>{
          let code = res.response.status
          let msg= `功能菜单保存失败(${code})`
          that.$notify.error({title: '失败',message:msg,duration:5000})
        })
    },
    hide() {
      this.conf.visible = false;
      this.$refs.form.resetFields();
    },
    onUploadSuccess(response){
      
    },
  },
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>